﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>逻辑监控</title>
		<link rel="stylesheet" href="./css/css.css">
		<link rel="stylesheet" href="./css/leftBar.css">
		<script type="text/javascript" src="./js/jquery-1.8.3.js"></script>
		<link type="text/css" rel="Stylesheet" href="./css/pm.css" />
		<script type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>
		<script type="text/javascript" src="./js/messagecenter.js"></script>
		<script type="text/javascript" src="./js/common.js"></script>
		<script type="text/javascript" src="./js/canvas5.js"></script>
		<style type="text/css">
		.app_text{
		  color:#04A0E9;
		  float:right;
		}
		.page-split input{
			display:inline;	
			margin:0px 4px;
		}
		.text_color{
			color:#A6A6A6;
			text-align: left;
			text-indent: 20px;
		}
		.r-text{
			font-size: 13px;
			text-align: center;
			margin-top: 10px;
		}
		.cell{
			background-color: #F7F8FA !important; ;
		}
	</style>
		<script>
            function lineEvent1(){}
            function lineEvent2(){}
            function lineEvent3(){}
            function  iconEvent4(obj){

            }
            /*右键*/
            function rightKey(robj){
            }

            /**菜单显示*/
            $(function(){
                $(".level2").show();
                $(".logic").addClass("checked");
                $(".phy").removeClass("checked");
                $(".comm").removeClass("checked");
                $(".general").removeClass("checked");
            });
		</script>
	</head>
	<body>
	
	<!-- <div class="lineMenu shadow">
		<div class="rk1" onclick="showPop5();">查看路径</div>
		<div class="rk2" onclick="showRight();">查看连线数据</div>
	</div> -->
	<div class="left_content">
		<div class="left_block1">
			<div class="left_logo"></div>
			<div class="left_title">品牌数据库编辑器，高效工作，人性化交互</div>
			<div class="left_icons">
				<div class="left_icon1"></div>
				<div class="left_icon2"></div>
				<div class="left_icon3"></div>
			</div>
		</div>
		<div class="left_block2">
			<div class="left_menu" onclick="window.location.href='physical_topology_library';">拓扑文件库</div>
			<div class="left_menu" onclick="window.location.href='logical_application_library';">逻辑预案库</div>
			<div class="left_menu" onclick="window.location.href='deploy_topology_library';">部署库</div>
			<div class="left_menu monitor">监控</div>
			<div class="left_menu level2" >
				<div class="level2Border phy" onclick="window.location.href='physical_monitors';">
					物理监控
				</div>
			</div>
			<div class="left_menu level2" >
				<div class="level2Border logic" onclick="window.location.href='logical_monitors';">
					逻辑监控
				</div>
			</div>
			<div class="left_menu other">其他</div>
			<div class="left_menu  level22" >
				<div class="level22Border comm" onclick="window.location.href='commonCMD';">
					我的常用命令
				</div>
			</div>
			<div class="left_menu level22" >
				<div class="level22Border general" onclick="window.location.href='generalCMD';">
					命令模板
				</div>
			</div>
		</div>
		<form th:action="@{/logout}" method="post" >
			<div class="left_block3">
				<div class="left_title">快捷管理机箱、板卡、芯片，提高工作效率便捷查找功能相关物理和逻辑链接，高效编辑请登陆BDE账号</div>
				<button class="bigmoniter" type="button" onclick="showBig();" style="cursor:pointer;">大屏监控</button>
				<button class="login"  type="submit">注销</button>
			</div>
		</form>
	</div>
	<div class="right_content" >
			<form id="form1">
				<input type="hidden" id="curId" name="curId">
				<!-- 头部 -->
				<div class="top-bar">
					<div style="float:left;">逻辑监控<br>
						<span  class="text_color"  style="font-size: 13px;">Logical&nbsp;moniting</span>
					</div>
					<div class="excuCMD">
						<button type="button" onclick="open_pop();">全局搜索</button>
						<button type="button" onclick="open_pop3();">控制台</button>
					</div>
					<!-- <div class="b1">1.10以内<img src="./images/monitors/1.1.png"></div>
					<div class="b2">2.1000以内<img src="./images/monitors/2.1.png"></div>
					<div class="b3">3.10000以内<img src="./images/monitors/3.1.png"></div>
					<div class="b4">4.100000以内<img src="./images/monitors/4.1.png"></div>
					<div class="b5">5.1000000以内<img src="./images/monitors/5.1.png"></div> -->
				</div>
				<!-- 右侧 -->
				<div class="right pop-right">
						<div class="r0 app_text">属性栏</div>

						<div  class="lu expand" style="cursor:pointer;">
							物理链路
						</div>

						<div  class="attrA expand" style="cursor:pointer;">
							物理端口A属性
						</div>

						<div  class="attrB expand" style="cursor:pointer;">
							物理端口B属性
						</div>

						<div  class="infoA expand" style="cursor:pointer;">
							物理端口A统计信息
						</div>

						<div  class="infoB expand" style="cursor:pointer;">
							物理端口B统计信息
						</div>
					</div>
				<!-- 左侧 -->
				<div class="table-box">
					
					
				</div>
			</form>
	</div>
	<!--查询弹窗-->
	<div class="pop_content" id="showInfo">
		<div class="pop_block">
			<div class="pop_barInfo" >
				<div style="font-size: 18px;">搜索</div>
			</div>
			<div class="exit_pop" ><img style="cursor:pointer;" alt="" src="./images/bsk/pop_exit.png" onclick="exit_pop();"></div>
			<div class="pop_input">
				<button class="searchAll" type="button">搜索</button>
				<input class="s_input" id="condition" type="text" name="" placeholder="输入编号或名称搜索"/>
				<button class="s_right" onclick="reset()" type="button">重置</button>
			</div>
			<div class="headerTableDiv2">
				<table cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
					<colgroup>
						<col width="20%">
						<col width="20%">
						<col width="20%">
						<col width="20%">
						<col width="20%">
					</colgroup>
					<tr>
						<td><div>编号</div></td>
						<td><div>名称</div></td>
						<td><div>类型</div></td>
						<td><div>状态</div></td>
						<td><div>备注</div></td>
					</tr>
				</table>
			</div>
			<div class="contentTableDiv2">
				<table cellspacing="0" cellpadding="0" style="border-collapse: collapse;width:100%;" >
					<colgroup>
						<col width="20%">
						<col width="20%">
						<col width="20%">
						<col width="20%">
						<col width="20%">
					</colgroup>
					<tbody class="popTbody"></tbody>
				</table>
			</div>
		</div>
	</div>
		
	<!-- CMD弹窗-->
		<div class="pop_content3" id="showInfo3">
			<div class="pop_block3" >
				<div class="pop_barInfo" >
					<div style="font-size: 14px;color:#434C53">控制台</div>
					<div style="font-size: 12px;color:#989898">The&nbsp;console</div>
				</div>
				<div class="exit_pop" ><img style="cursor:pointer;" alt="" src="./images/bsk/pop_exit.png" onclick="exit_pop3();"></div>
				<div class="contentText">
					<textarea class="contentTextTextArea" id="command"></textarea>
				</div>
				<div class="pop_excute">
					<button class="excute" type="button" onclick="issuedCommand();">立即执行</button>
					<input class="ex_input" id="shortCommand" type="text" name="" placeholder="输入命令"/>
					<button class="ex_reset" type="button" onclick="popHide()">隐藏</button>
				</div>
			</div>
		</div> -->
		
	<!--物理路由表弹窗-->
	<div class="pop_content2" id="showInfo2">
		<div class="pop_block2" >
			<div class="pop_barInfo" >
				<div style="font-size: 18px;">物理路由表信息查看</div>
			</div>
			<div class="exit_pop" ><img style="cursor:pointer;" alt="" src="./images/bsk/pop_exit.png" onclick="exit_pop2();"></div>
			<div class="headerTableDiv4">
				<table cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
					<colgroup>
						<col width="25%">
						<col width="25%">
						<col width="25%">
						<col width="25%">
					</colgroup>
					<tr id="showInfo2HeadTr">
						<td><div>设备ID</div></td>
						<td><div>出端口ID</div></td>
						<td><div>下一跳ID</div></td>
						<td><div>入端口ID</div></td>
					</tr>
				</table>
			</div>
			<div class="contentTableDiv4">
				<table cellspacing="0" cellpadding="0" style="border-collapse: collapse;width:100%;" >
					<colgroup>
						<col width="25%">
						<col width="25%">
						<col width="25%">
						<col width="25%">
					</colgroup>
					<tbody class="popTbody4">
						<tr>
							<td>1</td>
							<td>2</td>
							<td>3</td>
							<td>4</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
</body>

	<script type="text/javascript">
		//全局选中高亮
		
		
        $(document).bind('contextmenu',function(){
            return false;
        });


        $("body").click("mousedown",function(e){
            $(".rightKey").hide();
            $(".lineMenu").hide();
		});
        
       
	/* 命令执行*/
	function issuedCommand(){
		var command;
		var shortCommand=$("#shortCommand").val();
		command=$("#command").val();
		if(shortCommand){
			command=shortCommand;
		}
		$.ajax({
            url: "[[@{/gate_way/issued_command}]]",
            data:{command:command},
            contentType: "application/json",
            type: "POST",
            dataType:"JSON"
        }).done(function (result) {
        	alert("执行成功");
        });
	} 
	
    /*右侧列表*/
    var leftCpuId;
    var rightCpuId;
    var phyLink={};
	var portAprop={};
	var portBprop={};
	var portAstatistics={};
	var portBstatistics={};
     function iconEvent5(obj){
    	setTimeout(function(){
    		 leftCpuId=obj.param.leftCpuId;
        	 rightCpuId=obj.param.rightCpuId;
        	 data={
       			 startRionetId: leftCpuId,
       			   startPortId: obj.param.linkData.leftPort,	
       			   endRionetId: rightCpuId,
       			     endPortId: obj.param.linkData.rightPort
        	 };
        	 phyLink={};
       		 portAprop={};
       		 portBprop={};
       		 portAstatistics={};
       		 portBstatistics={};
    		
    		//加载链路信息
    		 $.ajax({url:'[[@{/gate_way/view_phylink_props }]]',
    	     	data:data,
    	     	dataType:"JSON",
    	     	ContentType: "application/x-www-form-urlencoded",
    	     	type:"POST"
    	     }).done(function(dataObj){
    	    	 var data=dataObj.data;
    	         if(data){
    	        	 //物理链路
    	        	 phyLink.id=data.phyLink.phyLinkId;
    	        	 phyLink.backUp=data.phyLink.backUp;
    	        	 phyLink.linkDown=data.phyLink.linkDown;
    	        	 phyLink.linkMode=data.phyLink.linkMode;
    	        	 phyLink.linkQuality=data.phyLink.linkQuality;
    	        	 //端口A属性
    	        	 portAprop.netId=data.portAprop.netId;
    	        	 portAprop.portBmode=data.portAprop.portBmode;
    	        	 portAprop.protId=data.portAprop.protId;
    	        	 //端口B属性
    	        	 portBprop.netId=data.portBprop.netId;
    	        	 portBprop.portBmode=data.portBprop.portBmode;
    	        	 portBprop.protId=data.portBprop.protId;
    	        	 //物理端口A统计信息
    	        	 portAstatistics.inputPackets=data.portAstatistics.inputPackets;
    	        	 portAstatistics.inputReTransmissionNum=data.portAstatistics.inputReTransmissionNum;
    	        	 portAstatistics.input4Bytes=data.portAstatistics.input4Bytes;
    	        	 portAstatistics.outputPackets=data.portAstatistics.outputPackets;
    	        	 portAstatistics.outputReTransmissionNum=data.portAstatistics.outputReTransmissionNum;
    	        	 portAstatistics.output4Bytes=data.portAstatistics.output4Bytes;
    	        	 portAstatistics.inputBandWidth=data.portAstatistics.inputBandWidth;
    	        	 portAstatistics.inputReTransmissionRate=data.portAstatistics.inputReTransmissionRate;
    	        	 portAstatistics.outputBandWidth=data.portAstatistics.outputBandWidth;
    	        	 portAstatistics.outputReTransmissionRate=data.portAstatistics.outputReTransmissionRate;
    	        	//物理端口B统计信息
            		 portBstatistics.inputPackets=data.portBstatistics.inputPackets;
       	        	 portBstatistics.inputReTransmissionNum=data.portBstatistics.inputReTransmissionNum;
       	        	 portBstatistics.input4Bytes=data.portBstatistics.input4Bytes;
       	        	 portBstatistics.outputPackets=data.portBstatistics.outputPackets;
       	        	 portBstatistics.outputReTransmissionNum=data.portBstatistics.outputReTransmissionNum;
       	        	 portBstatistics.output4Bytes=data.portBstatistics.output4Bytes;
       	        	 portBstatistics.inputBandWidth=data.portBstatistics.inputBandWidth;
       	        	 portBstatistics.inputReTransmissionRate=data.portBstatistics.inputReTransmissionRate;
       	        	 portBstatistics.outputBandWidth=data.portBstatistics.outputBandWidth;
       	        	 portBstatistics.outputReTransmissionRate=data.portBstatistics.outputReTransmissionRate;
    	         }
    	     });	
    	},3000);
    	
    }
    
    $(".lu.expand").on("click",function(){
    	if(phyLink==null){
    		return;
    	}
        if($(this).hasClass("pop-hide")){
            $(this).removeClass("pop-hide")
            $(".child_tr").remove();
        }else{
            var html='<div class="child_tr">';
            html+='<table class="childList">';
            if(phyLink.id){
            html+='<tr><td>物理连路ID</td><td><div class="app_text">'+phyLink.id+'</div></td></tr>';
            }else{
                html+='<tr><td>物理连路ID</td><td><div class="app_text"></div></td></tr>';
            }
            if(phyLink.backUp){
                html+='<tr><td>链路主备</td><td><div class="app_text">'+phyLink.backUp+'</div></td></tr>';
            }else{
                html+='<tr><td>链路主备</td><td><div class="app_text"></div></td></tr>';
            }
            if(!isNaN(phyLink.linkDown)){
                html+='<tr><td>连路Down</td><td><div class="app_text">'+phyLink.linkDown+'</div></td></tr>';
            }else{
                html+='<tr><td>连路Down</td><td><div class="app_text"></div></td></tr>';
            }
            if(phyLink.linkMode){
                html+='<tr><td>链路模式</td><td><div class="app_text">'+phyLink.linkMode+'</div></td></tr>';
            }else{
                html+='<tr><td>链路模式</td><td><div class="app_text"></div></td></tr>';
            }
            if(!isNaN(phyLink.linkQuality)){
                html+='<tr><td>链路质量等级</td><td><div class="app_text">'+phyLink.linkQuality+'</div></td></tr>';
            }else{
                html+='<tr><td>链路质量等级</td><td><div class="app_text"></div></td></tr>';
            }
            html+='</table>';
            html+='</div>';
            $(this).after(html);
            $(this).addClass("pop-hide")
        }

    });
   $(".attrA.expand").on("click",function(){
        if($(this).hasClass("pop-hide")){
            $(this).removeClass("pop-hide")
            $(".child_tr").remove();
        }else{
            var html='<div class="child_tr">';
            html+='<table class="childList">';
            if(portAprop.netId){
                html+='<tr><td>网络ID</td><td><div  class="app_text">'+portAprop.netId+'</div></td></tr>';
            }else{
                html+='<tr><td>网络ID</td><td><div  class="app_text"></div></td></tr>';
            }
            if(portAprop.portBmode){
                html+='<tr><td>端口ID</td><td><div  class="app_text">'+portAprop.portBmode+'</div></td></tr>';
            }else{
                html+='<tr><td>端口ID</td><td><div  class="app_text"></div></td></tr>';
            }
            if(!isNaN(portAprop.protId)){
                html+='<tr><td>端口B模式</td><td><div  class="app_text">'+portAprop.protId+'</div></td></tr>';
            }else{
                html+='<tr><td>端口B模式</td><td><div  class="app_text"></div></td></tr>';
            }
            html+='<tr><td colspan="2"><div onclick="open_pop2('+leftCpuId+',null)" style="cursor:pointer;float:left;" class="app_text">查看路由表项</div></td></tr>';
            html+='</table>';
            html+='</div>';

            $(this).after(html);
            $(this).addClass("pop-hide")
        }

    });
   $(".attrB.expand").on("click",function(){
        if($(this).hasClass("pop-hide")){
            $(this).removeClass("pop-hide")
            $(".child_tr").remove();
        }else{
            var html='<div class="child_tr">';
            html+='<table class="childList">';
            if(portBprop.netId){
                html+='<tr><td>网络ID</td><td><div class="app_text">'+portBprop.netId+'</div></td></tr>';
            }else{
                html+='<tr><td>网络ID</td><td><div class="app_text"></div></td></tr>';
            }
            if( portBprop.portBmode){
                html+='<tr><td>端口ID</td><td><div class="app_text">'+portBprop.portBmode+'</div></td></tr>';
            }else{
                html+='<tr><td>端口ID</td><td><div class="app_text"></div></td></tr>';
            }
            if(!isNaN(portBprop.protId)){
                html+='<tr><td>端口B模式</td><td><div class="app_text">'+portBprop.protId+'</div></td></tr>';
            }else{
                html+='<tr><td>端口B模式</td><td><div class="app_text"></div></td></tr>';
            }
            html+='<tr><td colspan="2"><div onclick="open_pop2('+rightCpuId+',null)" style="cursor:pointer;float:left;" class="app_text">查看路由表项</div></td></tr>';
            html+='</table>';
            html+='</div>';

            $(this).after(html);
            $(this).addClass("pop-hide")
        }

    });
   $(".infoA.expand").on("click",function(){
        if($(this).hasClass("pop-hide")){
            $(this).removeClass("pop-hide")
            $(".child_tr").remove();
        }else{
            var html='<div class="child_tr">';
            html+='<table class="childList">';
            if(portAstatistics.inputPackets){
                html+='<tr><td>输入所有包个数</td><td><div class="app_text">'+portAstatistics.inputPackets+'</div></td></tr>';
            }else{
                html+='<tr><td>输入所有包个数</td><td><div class="app_text"></div></td></tr>';
            }
            if(portAstatistics.inputReTransmissionNum){
                html+='<tr><td>输入重传包个数</td><td><div class="app_text">'+portAstatistics.inputReTransmissionNum+'</div></td></tr>';
            }else{
                html+='<tr><td>输入重传包个数</td><td><div class="app_text"></div></td></tr>';
            }
            if(portAstatistics.input4Bytes){
                html+='<tr><td>输入4字节数据量</td><td><div class="app_text">'+portAstatistics.input4Bytes+'</div></td></tr>';
            }else{
                html+='<tr><td>输入4字节数据量</td><td><div class="app_text"></div></td></tr>';
            }
            if(portAstatistics.outputPackets){
                html+='<tr><td>输出所有包个数</td><td><div class="app_text">'+portAstatistics.outputPackets+'</div></td></tr>';
            }else{
                html+='<tr><td>输出所有包个数</td><td><div class="app_text"></div></td></tr>';
            }
            if(portAstatistics.outputReTransmissionNum){
                html+='<tr><td>输出重传包个数</td><td><div class="app_text">'+portAstatistics.outputReTransmissionNum+'</div></td></tr>';
            }else{
                html+='<tr><td>输出重传包个数</td><td><div class="app_text"></div></td></tr>';
            }
            if(portAstatistics.output4Bytes){
                html+='<tr><td>输出4字节数据量</td><td><div class="app_text">'+portAstatistics.output4Bytes+'</div></td></tr>';
            }else{
                html+='<tr><td>输出4字节数据量</td><td><div class="app_text"></div></td></tr>';
            }
            if(portAstatistics.inputBandWidth){
                html+='<tr><td>输入带宽</td><td><div class="app_text">'+portAstatistics.inputBandWidth+'</div></td></tr>';
            }else{
                html+='<tr><td>输入带宽</td><td><div class="app_text"></div></td></tr>';
            }
            if(portAstatistics.inputReTransmissionRate){
                html+='<tr><td>输入重传率</td><td><div class="app_text">'+portAstatistics.inputReTransmissionRate+'</div></td></tr>';
            }else{
                html+='<tr><td>输入重传率</td><td><div class="app_text"></div></td></tr>';
            }
            if(portAstatistics.outputBandWidth){
                html+='<tr><td>输出宽带</td><td><div class="app_text">'+portAstatistics.outputBandWidth+'</div></td></tr>';
            }else{
                html+='<tr><td>输出宽带</td><td><div class="app_text"></div></td></tr>';
            }
            if(portAstatistics.outputReTransmissionRate){
                html+='<tr><td>输出重传率</td><td><div class="app_text">'+portAstatistics.outputReTransmissionRate+'</div></td></tr>';
            }else{
                html+='<tr><td>输出重传率</td><td><div class="app_text"></div></td></tr>';
            }
            html+='</table>';
            html+='</div>';

            $(this).after(html);
            $(this).addClass("pop-hide")
        }
    });
   $(".infoB.expand").on("click",function(){
        if($(this).hasClass("pop-hide")){
            $(this).removeClass("pop-hide")
            $(".child_tr").remove();
        }else{
            var html='<div class="child_tr">';
            html+='<table class="childList">';
            if(portBstatistics.inputPackets){
                html+='<tr><td>输入所有包个数</td><td><div class="app_text">'+portBstatistics.inputPackets+'</div></td></tr>';
            }else{
                html+='<tr><td>输入所有包个数</td><td><div class="app_text"></div></td></tr>';
            }
            if(portBstatistics.inputReTransmissionNum){
                html+='<tr><td>输入重传包个数</td><td><div class="app_text">'+portBstatistics.inputReTransmissionNum+'</div></td></tr>';
            }else{
                html+='<tr><td>输入重传包个数</td><td><div class="app_text"></div></td></tr>';
            }
            if(portBstatistics.input4Bytes){
                html+='<tr><td>输入4字节数据量</td><td><div class="app_text">'+portBstatistics.input4Bytes+'</div></td></tr>';
            }else{
                html+='<tr><td>输入4字节数据量</td><td><div class="app_text"></div></td></tr>';
            }
            if(portBstatistics.outputPackets){
                html+='<tr><td>输出所有包个数</td><td><div class="app_text">'+portBstatistics.outputPackets+'</div></td></tr>';
            }else{
                html+='<tr><td>输出所有包个数</td><td><div class="app_text"></div></td></tr>';
            }
            if(portBstatistics.outputReTransmissionNum){
                html+='<tr><td>输出重传包个数</td><td><div class="app_text">'+portBstatistics.outputReTransmissionNum+'</div></td></tr>';
            }else{
                html+='<tr><td>输出重传包个数</td><td><div class="app_text"></div></td></tr>';
            }
            if(portBstatistics.output4Bytes){
                html+='<tr><td>输出4字节数据量</td><td><div class="app_text">'+portBstatistics.output4Bytes+'</div></td></tr>';
            }else{
                html+='<tr><td>输出4字节数据量</td><td><div class="app_text"></div></td></tr>';
            }
            if(portBstatistics.inputBandWidth){
                html+='<tr><td>输入带宽</td><td><div class="app_text">'+portBstatistics.inputBandWidth+'</div></td></tr>';
            }else{
                html+='<tr><td>输入带宽</td><td><div class="app_text"></div></td></tr>';
            }
            if(portBstatistics.inputReTransmissionRate){
                html+='<tr><td>输入重传率</td><td><div class="app_text">'+portBstatistics.inputReTransmissionRate+'</div></td></tr>';
            }else{
                html+='<tr><td>输入重传率</td><td><div class="app_text"></div></td></tr>';
            }
            if(portBstatistics.outputBandWidth){
                html+='<tr><td>输出宽带</td><td><div class="app_text">'+portBstatistics.outputBandWidth+'</div></td></tr>';
            }else{
                html+='<tr><td>输出宽带</td><td><div class="app_text"></div></td></tr>';
            }
            if(portBstatistics.outputReTransmissionRate){
                html+='<tr><td>输出重传率</td><td><div class="app_text">'+portBstatistics.outputReTransmissionRate+'</div></td></tr>';
            }else{
                html+='<tr><td>输出重传率</td><td><div class="app_text"></div></td></tr>';
            }
            html+='</table>';
            html+='</div>';

            $(this).after(html);
            $(this).addClass("pop-hide")
        }
    });
	
	function open_pop2(cpuId){
	   var data={};
	   var dataArr = [];
	  
	   for(var i=0;i<phyPorts.length;i++){
		   var curPort=phyPorts[i];
		   if(curPort.rionetId==cpuId){
			   var result=curPort.routes;
			   if(result){
				addDataPop2(result);
			   }
		   }
	   }
		  $("#showInfo2").show();
			tableSum2();
  }
	function addDataPop2(data){
		$(".contentTableDiv4 .popTbody4").empty();
		var html = '';
		for(var i=0;i<data.length;i++){
			var dataList=data[i];
			html += '<tr>';
			html += '<td>'+dataList.m_dstID+'</td>';
			html += '<td>'+dataList.m_inPortId+'</td>';
			html += '<td>'+dataList.outPorts+'</td>';
			html += '<td>'+dataList.nextHops+'</td>';
			html += '</tr>';
		}
		$(".contentTableDiv4  .popTbody4").append(html);
	}
   /*CMD弹窗 */
   function open_pop3(){
	   $("#showInfo3").show();
   }
   function popHide(){
	   $("#showInfo3").hide();
   }
   function exit_pop3(){
	   $("#showInfo3").hide();
   }
 
  
   /*查询弹窗 */
   function open_pop(){
	   $(".contentTableDiv2 .popTbody").empty();
	   reset();
	   $(".searchAll").on("click",function () {
		  var name_like = $("#condition").val(); 
		  var dataArr = [];
		    $.post('[[@{/search/query}]]',{value:name_like},"JSON").done(function(res){
		    	var data=res.data;
			   addDataPop(data);
		    });
	   });
	   //全局搜索高亮
	   $("#showInfo").show();
   }
   function reset(){
	   $("#condition").val("");
   }
   function addDataPop(data){
	   $(".contentTableDiv2 .popTbody").empty();
	   var html = '';
	   $.each(data,function(k,v){
		   html += '<tr id="trClick" onDblClick="trClick(this,'+v.no+')">';
		   if(v.no){
			   html += '<td>'+v.no+'</td>';
		   }else{
			   html += '<td></td>';
		   }
		   if(v.name){
			   html += '<td>'+v.name+'</td>';
		   }else{
			   html += '<td></td>';
		   }
		   if(v.type){
			   if(v.type==1){
				   html += '<td>主机</td>';
			  	 }else if(v.type==2){
					   html += '<td>板卡</td>';
			  	 }else if(v.type==3){
					   html += '<td>处理单元 </td>';
			  	 }else if(v.type==4){
					   html += '<td>应用</td>';
			  	 }
		   }else{
			   html += '<td></td>';
		   }
		   if(v.state){
			   html += '<td>'+v.state+'</td>';
		   }else{
			   html += '<td></td>';
		   }
		   if(v.remark){
			   html += '<td>'+v.remark+'</td>';
		   }else{
			   html += '<td></td>';
		   }
		   html += '</tr>';
	   });
	   $(".contentTableDiv2 .popTbody").append(html);
	   tableSum();

   }
  function trClick(obj,id){
   	$("#showInfo").hide();
  	 var tds = $(obj).find("td");
  	 var selecType=$(tds[2]).html();
  	 var curLevel=-1;
  	 if(selecType=="主机"){
  		curLevel=1;
  	 }else if(selecType=="板卡"){
  		curLevel=2;
  	 }else if(selecType=="处理单元"){
  		curLevel=3
  	 }else if(selecType=="应用"){
  		curLevel=4;
  	 }
  	 
	 addCanvasAllLevelObj(id,curLevel);
   	 drawCircles(); 
   }
   function exit_pop(){
	   $("#showInfo").hide();
   }
	function exit_pop2(){
		$("#showInfo2").hide();
	}
	function tableSum() {
		$(".contentTableDiv2").scrollTop(10);// 控制滚动条下移10px
		if ($(".contentTableDiv2").scrollTop() > 0) {
			var scrollWidth = getScrollbarWidth();
			$(".contentTableDiv2").css("right",(30-scrollWidth)+"px");
		} else {
			$(".contentTableDiv2 table").css("width", "100%");
		}
		$(".contentTableDiv2").scrollTop(0);// 滚动条返回顶部
	}
	function tableSum2() {
		$(".contentTableDiv4").scrollTop(10);// 控制滚动条下移10px
		if ($(".contentTableDiv4").scrollTop() > 0) {
			var scrollWidth = getScrollbarWidth();
			$(".contentTableDiv4").css("right",(30-scrollWidth)+"px");
		} else {
			$(".contentTableDiv4 table").css("width", "100%");
		}
		$(".contentTableDiv4").scrollTop(0);// 滚动条返回顶部
	}

	function getScrollbarWidth() {
	    var odiv = document.createElement('div'),//创建一个div
	        styles = {
	            width: '100px',
	            height: '100px',
	            overflowY: 'scroll'//让他有滚动条
	        }, i, scrollbarWidth;
	    for (i in styles) odiv.style[i] = styles[i];
	    document.body.appendChild(odiv);//把div添加到body中
	    scrollbarWidth = odiv.offsetWidth - odiv.clientWidth;//相减
	    odiv.remove();//移除创建的div
	    return scrollbarWidth;//返回滚动条宽度
	}
	</script>
	
	<script type="text/javascript">
		//彈窗拖動
		$(function(){
			$(".pop_block").on({
			    mousedown: function(e){
					    	var obj = e.target;
			    			if(!$(obj).is("input")){
		    				 	var el=$(this);
				                var os = el.offset(); dx = e.pageX-os.left, dy = e.pageY-os.top;
				                $(document).on('mousemove.drag', function(e){ el.offset({top: e.pageY-dy, left: e.pageX-dx}); });
			    			}
			               
			            },
			   mouseup: function(e){ $(document).off('mousemove.drag'); }
			});
		});
		$(function(){
			$(".pop_block2").on({
			    mousedown: function(e){
					    	var obj = e.target;
			    			if(!$(obj).is("input")){
		    				 	var el=$(this);
				                var os = el.offset(); dx = e.pageX-os.left, dy = e.pageY-os.top;
				                $(document).on('mousemove.drag', function(e){ el.offset({top: e.pageY-dy, left: e.pageX-dx}); });
			    			}
			               
			            },
			   mouseup: function(e){ $(document).off('mousemove.drag'); }
			});
		});
		$(function(){
			$(".pop_block3").on({
			    mousedown: function(e){
					    	var obj = e.target;
			    			if(!$(obj).is("input")){
		    				 	var el=$(this);
				                var os = el.offset(); dx = e.pageX-os.left, dy = e.pageY-os.top;
				                $(document).on('mousemove.drag', function(e){ el.offset({top: e.pageY-dy, left: e.pageX-dx}); });
			    			}
			               
			            },
			   mouseup: function(e){ $(document).off('mousemove.drag'); }
			});
		});
	</script>
	
	<script type="text/javascript">
	var canvasData = {x:0 , y:0, width:Math.ceil(window.innerWidth-570), height:Math.ceil(window.innerHeight-52)};
    init_canvas(canvasData ,3,lineEvent1 , lineEvent2 ,lineEvent3,iconEvent4,iconEvent5);//初始化
    drawCircles();
    var machineBoxes=[];
	var boards=[];
	var cpus=[];
	var phyLinks=[];
	var phyPorts=[];
	var apps;
	//var boardId;
    $(function(){
		
	    $.post('[[@{/gate_way/init_toplogical}]]',null,"JSON").done(function(res){
	        if(res){
	            var data = res.data;
	             machineBoxes = data.machineBoxes;
	             boards=data.boards;
	             
	             phyLinks=data.phyLinks;
	             phyPorts=data.phyPorts;
	             for(var i=0;i<machineBoxes.length;i++){
                    addCanvasLevel1(i,machineBoxes[i]);
					for(var j=0;j<boards.length;j++){
						cpus=boards[j].cpus;
						boards[j].machineBoxId=machineBoxes[i].id;
                        addCanvasLevel2(i ,j,boards[j]);
                        for(var k=0;k<cpus.length;k++){
                        	var cpu=cpus[k];
                        	var curId=cpu.rioNetId;
                        	cpu.machineBoxId=machineBoxes[i].id;
                        	cpu.boardId=boards[j].id;
              	        	addCanvasLevel3(i,j,k,null,{cpu:cpu});
                        }
                        
					}
	             }
	           
	    	   //添加app
	           if(canvasAllLevel2){
	        	    for(var i=0;i<canvasAllLevel2.length;i++){
	        	    	var boardId=canvasAllLevel2[i].id;
	  	        		$.ajax({
	      	   	            url: '[[@{/app_cpu_bindor/query_bindor_by_deviceId}]]',
	      	   	            data:{id:boardId},
	      	   	            type: "POST",
	      	   	            dataType:"JSON",
	      	   	         	async: false
	      	   	        }).done(function (appData) {
      	   		        	if(appData){
      	   		        	var apps=appData.data;
  	    	   	   	        	for(var ii=0;ii<apps.length;ii++){
  	    	   	   	        		for(var jj=0;jj<canvasAllLevel3.length;jj++){
  	    	   	   	        			if(apps[ii].cpu.id==canvasAllLevel3[jj].id){
  	    	   	   	        				var curApp=apps[ii];
  	    	   	   	        				var newObj={acBindorsId:curApp.id,tId:curApp.app.id,x:canvasAllLevel3[jj].x,y:canvasAllLevel3[jj].y,width:canvasAllLevel3[jj].width,height:canvasAllLevel3[jj].height,id:ii,img:curApp.app.icon,app:curApp.app};
		  	    	   	   	        		canvasAllLevel4.push(newObj);
		  	        	        			drawCircles();
  	    	   	   	        			}
  	    	   	   	        		}
  	    	   	   	        	}
  	    	   	   	        }
	      	   	        });
	        	    }
	        	    
	        	    //app连线
	        	    $.post('[[@{/logic_link/all}]]',null,"JSON").done(function(res){
	        	    	if(res){
	        	    		var data=res.data;
	        	    		var leftCpu;
	                    	var rightCpu;
	                    	var leftPortId;
	                    	var rightPortId;
	        				var linkData={};
	        				for(var i=0;i<data.length;i++){
	        					var leftAppId=data[i].leftApp.id;
	        					//var leftAppId=150;
	        					//var rightAppId=196;
	        					var rightAppId=data[i].rightApp.id;
	        					
	        					for(var j=0;j<canvasAllLevel4.length;j++){
	        						var curlAppId=canvasAllLevel4[j].tId;
	        						if(leftAppId==curlAppId){
	        							leftCpu=canvasAllLevel4[j];
	        							for(var k=0;k<canvasAllLevel4.length;k++){
	        								var currAppId=canvasAllLevel4[k].tId;
	        								if(rightAppId==currAppId){
	        									rightCpu=canvasAllLevel4[k];
	        									break;
	        								}
	        							  }
	        							linkDatas={linkData:data[i],leftCpuId:leftCpu.id,rightCpuId:rightCpu.id};
	        			          		doLine(leftCpu , rightCpu ,linkDatas);
	        							break;
	        							}
	        					}
	        				}
	           	           drawCircles();
	        	    	}
	        	    });
	        	    
	        	    
	           }
	        }
	    });
	 
	});
    function showBig(){
		window.location.href="physical_monitors2"
	}
	</script>
</html>
